//Rules are rules that can be expressed but difficult to advance.
import React from 'react';
import { connect } from 'react-redux'
import { deepFullCopy, messages } from 'share/common';
import { Form, Input, Select, Button, Spin, message, Modal, Table, Popover, DatePicker, Row, Col } from 'antd';
const TextArea = Input.TextArea;
import Chooser from 'components/chooser'
import baseService from 'share/base.service'
import expenseReportService from "containers/expense-report/expense-report.service"
import 'styles/expense-report/template/edit-pay-info.scss'
import NewVendorForm from 'containers/request/new-request/new-vendor-form'
import requestService from '../../request/request.service';
import moment from 'moment'
import debounce from 'lodash.debounce';
import errorMessage from "share/errorMessage"
import chooserData from 'share/chooserData';

const FormItem = Form.Item;
const Option = Select.Option;

class EditPayInfo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      visible: false,
      newVendorVisible: false,
      bankListOption: [],//选择列表,
      accountFooter: [],
      accountModalVisible: false,
      chooseInfo: {},
      accountColumns: [
        {title: messages('request.key242'/*供应商收款账号*/), dataIndex: 'bankAccount', width: '20%', render: value =>
          <Popover content={value}>{value}</Popover>},
        {title: messages('request.key140'/*开户银行*/), dataIndex: 'bankName', width: '35%', render: value =>
          <Popover content={value}>{value}</Popover>},
        {title: messages('request.key243'/*开户银行联行号*/), dataIndex: 'bankCode', width: '20%', render: value =>
          <Popover content={value}>{value}</Popover>},
        {title: messages('request.key244'/*开户银行所在地*/), dataIndex: 'bankOpeningCity', width: '18%', render: value =>
          <Popover content={value}>{value}</Popover>}
      ],
      payeeInfo: {},
      accountData: [],
      selectedRowKeys: [],
      paymentMethodLoading: false,
      paymentMethodList: [], // 付款用途列表
      paymentPurposeId: {}, // 付款方式类型
      isContractSelected: false
    };
    this.handlePaymentPurposeId = debounce(this.handlePaymentPurposeId, 500);
  }

  componentWillReceiveProps(nextProps) {
    //state状态改变、回调(此处react重绘严重,注意代码严谨性)
    const { paymentPurposeId } = this.state;
    const { visible } = nextProps.params;
    if (visible && !paymentPurposeId.messageKey && nextProps.formOID) {
      this.handlePaymentPurposeId(nextProps);
    }

    if (!nextProps.params.hasInit) {
      this.props.form.resetFields();
      nextProps.params.hasInit = true;
      this.setState({ isContractSelected: false, bankListOption: [] });
    }
  }

  componentWillMount() {
    this.handleSetAddBankButton();
  }

  handleSetAddBankButton =() =>{
    // 没有想要的银行账号？新增银行账号
    let addNewBankInfoBtn = ( <div style={{ float:'left' }}>
      { messages('request.key247'/*没有想要的收款账号*/) }?
      <Button type='primary' size="small" onClick={ this.addNewBankInfoBtnHandler }>
        { messages('request.key248'/*新增银行账号*/) }
      </Button>
    </div>);
    let okBtn = (<Button type="primary" onClick={ this.handleModalOk }>{ messages('common.ok') }</Button>);
    const accountFooter =[addNewBankInfoBtn ,okBtn];
    this.setState({ accountFooter });
  };

  addNewBankInfoBtnHandler = () => {
    if(this.state.chooseInfo.source === "TENANT"){
      // "租户级的供应商，不允许新增银行账户"
      message.warn(messages('request.key249'/*租户级的供应商，不允许新增银行账户*/))

    }else {
      this.setState({ newVendorVisible: true, accountModalVisible: false })
    }
  }
  //费用类型改变
  handleChangePayeeType = () => {
    this.setState({ bankListOption: [] });
    this.props.form.setFieldsValue({ accountName: undefined, accountNumber: undefined, accountId: undefined });
  };

  handleOk = (e) => {
    e.preventDefault();
  };

  onCancel = () => {
    this.setState({ visible: false, isContractSelected: false });
  };

  //保存
  handleSave = (e) => {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        let { bankListOption, paymentPurposeId } = this.state;
        // 银行卡号信息
        let payInfo = bankListOption.filter(item =>
          item.accountNumber === values['accountNumber']
        )[0] || {};
        // 供应商或员工信息
        let payeeInfo = values.accountId[0];
        let invoicePayeeInfoDTO = {
          payeeType: values['payeeType'],
          payeeId: payeeInfo.id,
          payeeCode: values['payeeType'] === 1002 ? payeeInfo.employeeID : payeeInfo.venNickOid,
          payeeName: values['payeeType'] === 1002 ? payeeInfo.fullName : payeeInfo.venNickname,
          bankAccount: payInfo.accountNumber,
          accountName: payInfo.accountName,
          bankCode: payInfo.bankCode,
          schedulePaymentDate: values['schedulePaymentDate'],
          paymentPurposeId: values['paymentMethod'],
          paymentMethod: paymentPurposeId.code,
          remark: values.remark
        };
        let { selectInvoiceOIDs, companyOID } = this.props;
        let invoicePayeeBatchInfo = {
          invoiceOIDs: selectInvoiceOIDs,
          companyOID: companyOID,
          invoicePayeeInfoDTO,
        };
        if (values['contract'] && values['contract'][0]) {
          invoicePayeeBatchInfo['invoicePayeeContractInfoDTO'] = {
            contractHeaderId: values['contract'][0].contractHeaderId,
            contractLineId: values['contract'][0].contractLineId,
          };
        }
        this.setState({loading: true});
        expenseReportService.batchChangePayeeInfo(invoicePayeeBatchInfo)
          .then(res => {
            if (res.data && res.data.success) {
              message.success(messages('common.operate.success')/*操作成功*/);
              this.props.handleSave();
            } else {
              message.error(messages('common.operate.filed')/*操作失败*/);
            }
          })
          .catch((err) => {
            errorMessage(err.response)
          })
          .finally(() => {
            this.setState({ loading: false });
          });
      }
    })
  };

  //选择用户
  selectUser = (info) => {
    const { setFieldsValue } = this.props.form;
    let params = { userOID: info[0].userOID };
    let { bankListOption } = this.state;
    bankListOption = [];
    baseService.getUserBanks(params)
      .then(res => {
        let bankList = res.data;
        if (bankList && bankList.length > 0) {
          bankList.map(item => {
            if (item.enable) {
              if (item.isPrimary) {
                setFieldsValue({ accountNumber: item.bankAccountNo, accountName: item.bankAccountName });
              }
              bankListOption.push({
                accountNumber: item.bankAccountNo,
                accountName: item.bankAccountName,
                //显示到支行
                branchName: item.branchName,
                bankCode: item.bankCode,
                payeeCode: info[0].employeeID,
                payeeId: info[0].id,
                payeeName: info[0].fullName,
                originalBankAccountNo: item.originalBankAccountNo,
                bankAccountTypeName: item.bankAccountTypeName,
              });
            }
          });
        } else {
          setFieldsValue({ accountNumber: void 0 });
        }
      })
      .finally(()=>{
        this.setState({ bankListOption });
      })
  };

  //选择供应商
  selectVendor = (vendor) => {
    let {bankListOption} = this.state;
    const { form: { setFieldsValue } } = this.props;
    bankListOption = [];
    let bankList = [];
    if (vendor && vendor[0]) {
      bankList = vendor[0].venBankAccountBeans;
    }
    if (bankList && bankList.length > 0) {
      bankList.map(item => {
        bankListOption.push({
          accountNumber: item.bankAccount,
          accountName: item.venBankNumberName,
          //供应商不确定是否有支行？需求没说明，先不改，还是显示 bankName
          branchName: item.bankName,
          bankCode: item.bankCode,
          payeeCode: vendor[0].venNickOid,
          payeeId: vendor[0].id,
          payeeName: vendor[0].venNickname,
          originalBankAccountNo: item.originalBankAccountNo
        })
      });
      const isPrimary = bankList.some(item => {
        if (item.primaryFlag) {
          setFieldsValue({ accountNumber: item.bankAccount, accountName: item.venBankNumberName });
          return true;
        }
      });
      if (!isPrimary) {
        setFieldsValue({ accountNumber: undefined, accountName: undefined });
      }
    } else {
      let { setFieldsValue } = this.props.form;
      setFieldsValue({ accountNumber: undefined, accountName: undefined })
    }
    this.setState({ bankListOption })
  };

  changeBankAccount = (value) => {
    const {bankListOption} = this.state;
    bankListOption && bankListOption.length > 0 && bankListOption.map(item => {
      if (item.accountNumber === value) {
        let { setFieldsValue } = this.props.form;
        setFieldsValue({ accountName: item.accountName })
      }
    });
  };

  /**
   * @description 取消新增供应商
   */
  handleCancelNewVendor = () => {
    this.setState({ newVendorVisible: false, chooseInfo:{} });
  };


  /**
   * @description 确认新增供应商
   */
  handleNewVendorOk = (value) => {
    this.setState({
      newVendorVisible: false,
      accountModalVisible: true,
    },() => {
      this.getAccountList(value.id);
      this.child.getList();
    })
  };

  getAccountList = (id = this.state.chooseInfo.id, bankId) => {
    this.setState({ loadingBankList: true });
    const { accountModalVisible } = this.state;
    requestService.getAccountInfo(id, bankId).then(res => {
      // let data = res.data.body[0];
      //返回接口数据结构改变
      let data = res.data;
      let bankAccounts = data.venBankAccountBeans;
      if (!bankAccounts || bankAccounts.length === 0) {
        this.setState({
          loadingBankList: false,
          accountData: bankAccounts,
          selectedRowKeys: [],
        });
        accountModalVisible ? (this.setState({
          chooseRows: [],
          chooseInfo: data
        })) : (this.setState({
          selectedRows: [],
          payeeInfo: data
        }));
        return;
      }
      let select = -1;
      for (let i = 0; i < bankAccounts.length; i++) {
        if (bankAccounts[i].venType === 1001) {
          select = i;
          break;
        }
      }
      if(select === -1) {
        this.setState({ loadingBankList: false, accountData: bankAccounts, selectedRowKeys: [] });
        accountModalVisible ? this.setState({ chooseRows: [], chooseInfo: data }) :
          this.setState({ selectedRows: [], payeeInfo: data });
        return;
      }
      this.setState({
        loadingBankList: false,
        accountData: bankAccounts,
        selectedRowKeys: [bankAccounts[select].id]
      });
      accountModalVisible ? this.setState({ chooseRows: [bankAccounts[select]], chooseInfo: data }) :
        this.setState({ selectedRows: [bankAccounts[select]],  payeeInfo: data });
    })
  };

  handleModalCancel = () => {
    this.setState({accountModalVisible: false});
  };


  handleModalOk = () => {
    this.setState({
      accountModalVisible: false,
    });
  };

  renderAllExpandedRow = (record) => {
    return record.venType === 1002 ? '该银行账户已被企业停用' : '';
  };

  addVendor = () => {
    this.setState({newVendorVisible: true, chooseInfo:{}});
  };

  onRef = (ref) => {
    this.child = ref
  };

  /**
   * @desc  获取付款用途列表
   */
  handleGetPaymentMethod = () => {
    const { formOID } = this.props;
    let { paymentMethodLoading, paymentMethodList } = this.state;
    if (paymentMethodList && paymentMethodList[0]) {
      return;
    }
    paymentMethodLoading = true;
    this.setState({ paymentMethodLoading });
    expenseReportService.getApplicationPaymentMethod(formOID)
      .then(res => {
        paymentMethodList = res.data.loanTypes;
      })
      .finally(() => {
        paymentMethodLoading = false;
        this.setState({ paymentMethodList }, () => {
          this.setState({ paymentMethodLoading });
        });
      });
  };

  /**
   * @desc  获取付款方式类型
   */
  handlePaymentPurposeId = (nextProps) => {
    let { paymentPurposeId } = this.state;
    let { formOID } = nextProps;
    expenseReportService.getApplicationPaymentType(formOID)
      .then(res => {
        paymentPurposeId = { ...res.data };
        this.setState({ paymentPurposeId });
      });
  };
  /**
   * @desc 关联合同行
   */
  handleChangeContractLine = (contract) => {
    const { setFieldsValue, getFieldValue } = this.props.form;
    let { isContractSelected } = this.state;
    let accountId = [], payeeType, schedulePaymentDate, accountNumber = getFieldValue('accountNumber');
    let middleFunc = (contractObj) => {
      contractObj.vendorInfoDTO.venBankAccountBeans
        .map(item => {
          item.branchName = item.bankOpeningBank;
          item.bankCode = item.bankOperatorNumber;
          item.primaryFlag = contractObj.vendorInfoDTO.venBankAccountBeans.length === 1;
        });
      contractObj.vendorInfoDTO.venderCode = contractObj.vendorInfoDTO.venNickOid;
      accountId.push({ ...contractObj.vendorInfoDTO });
      payeeType = 1001;
    };
    let contractType = {
      'VENDER': (contractObj) => {
        middleFunc(contractObj);
      },
      'VENDOR': (contractObj) => {
        middleFunc(contractObj);
      },
      'EMPLOYEE': (contractObj) => {
        const { employeeID, fullName, userID, userOID } = contractObj.employeeInfoDTO;
        accountId.push({ employeeID, fullName, userOID, id: userID });
        payeeType = 1002;
      }
    };

    if (contract[0]) {
      contractType[contract[0].partnerCategory](contract[0]);
      schedulePaymentDate = moment(new Date(contract[0].dueDate), 'YYYY-MM-DD');
      isContractSelected = true;
    } else {
      isContractSelected = false;
      payeeType = void 0;
      accountId = void 0;
      accountNumber = void 0;
      schedulePaymentDate = moment(new Date(), 'YYYY-MM-DD')
    }
    this.setState({ isContractSelected });
    setFieldsValue({ payeeType, accountId, schedulePaymentDate, accountNumber });
  };
  //渲染收款方
  renderPayeeId = () => {
    const { hasSupplierAdd, company: { setOfBooksId } } = this.props;
    const { isContractSelected } = this.state;
    const { expenseReportInvoices, expenseInfo } = this.props.params;
    let payeeType = Number(this.props.form.getFieldValue('payeeType'));
    let userOIDs = [];
    expenseInfo.createdBy && userOIDs.push(expenseInfo.createdBy);
    expenseReportInvoices.map(item => {
      if (item.invoiceView && item.invoiceView.ownerOID && userOIDs.indexOf(item.invoiceView.ownerOID) === -1) {
        userOIDs.push(item.invoiceView.ownerOID);
      }
    });
    let userParams = {userOIDs};
    let venderParams = {
      companyOid: this.props.companyOID
    };

    let chooserItem = deepFullCopy(chooserData['loan-max-users']);
    chooserItem.url += `&setOfBooksId=${setOfBooksId}`;
    if(payeeType !== 1002){
      chooserItem = deepFullCopy(chooserData['vendor_account']);
    }
    return (
      <Chooser
        valueKey={payeeType === 1002 ? 'userOID' : 'venderCode'}
        labelKey={payeeType === 1002 ? 'fullName' : 'venNickname'}
        selectorItem={chooserItem}
        single={true}
        showClear={false}
        disabled={isContractSelected}
        placeholder={messages('common.please.select')}
        modalRef={this.onRef}
        onChange={payeeType === 1002 ? this.selectUser : this.selectVendor}
        extraBottom={(payeeType === 1001 && hasSupplierAdd) ?
          (<div style={{ float: 'left', position: 'absolute', bottom: '10px' }}>
            {messages('request.key245'/*没有搜索到想要的供应商*/)}?
            <Button type='primary' size="small"
                    onClick={this.addVendor}>
              {messages('request.key246'/*新增供应商*/)}</Button>
          </div>) : ''}
        listExtraParams={payeeType === 1002 ? userParams : venderParams}/>
    );
  };

  render() {
    const { getFieldDecorator, getFieldValue } = this.props.form;
    const { payInfo, companyOID, userOid, currencyCode, contractHeaderId ,expenseInfo, profile} = this.props;
    let remarkInitialValue = undefined;
    (expenseInfo.custFormValues || []).map(item => {
      item.messageKey === 'title' && (remarkInitialValue = item.value);
    });
    const { loading, bankListOption, newVendorVisible, accountModalVisible,
      accountFooter, chooseInfo, payeeInfo, accountColumns, accountData,
      loadingBankList, paymentMethodLoading, paymentMethodList, paymentPurposeId ,isContractSelected} = this.state;
    const formItemLayout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 13, offset: 1 },
    };
    const contract = getFieldValue('contract');
    let contractString = '';
    if (contract && contract[0]) {
      let [{ lineNumber, dueDate }] = contract;
      contractString = [`${messages('expense-parent-report.key203')}${lineNumber}`, `${messages('acp.contract.date')}${moment(new Date(dueDate)).format('YYYY-MM-DD')}`].join(' | ');
    }
    const schedulePaymentDate = expenseInfo && expenseInfo.contractHeaderId ? moment(expenseInfo.createdDate, 'YYYY-MM-DD') : null;
    return (
      <div className="edit-pay-info">
        <Form>
          {
            expenseInfo && !!expenseInfo.contractPosition &&
            <section>
              <FormItem {...formItemLayout} label={messages('expense-parent-report.key195')/*关联合同行*/}>
                {getFieldDecorator('contract', {
                  rules: [{
                    required: !!expenseInfo.contractHeaderId,
                    message: messages('common.name.is.required', { name: messages('expense-parent-report.key195')/*关联合同行*/ })
                  }]
                })(
                  <Chooser type="choose_contract"
                           listExtraParams={{
                             documentType: 'PUBLIC_REPORT',
                             companyOID: companyOID,
                             currency: currencyCode,
                             contractHeaderId: contractHeaderId
                           }}
                           disabled={!expenseInfo.contractHeaderId && expenseInfo.contractPosition === 'DOCUMENTS_HEAD'}
                           labelKey="contractNumber"
                           valueKey="contractLineId"
                           itemMap
                           single={true} //需求12562 报销单创建时，可以关联多申请单
                           onChange={this.handleChangeContractLine}/>
                )}
              </FormItem>
              {contractString && <Row>
                <Col span={13} offset={7} style={{ marginTop: '-30px' }}>{contractString}</Col>
              </Row>
              }
            </section>
          }

          <FormItem label={messages('expense-parent-report.key112')/*收款方类型*/} {...formItemLayout}>
            {getFieldDecorator('payeeType', {
              initialValue: payInfo.payeeType,
              rules: [{
                required: true,
                message: messages('common.please.select'),
              }]
            })(
              <Select
                disabled={isContractSelected}
                onChange={this.handleChangePayeeType}
                placeholder={messages('common.please.select')}
                getPopupContainer={triggerNode => triggerNode.parentNode}
              >
                <Option value={1001} key={1001}>{messages('expense-parent-report.key113')/*供应商*/}</Option>
                <Option value={1002} key={1002}>{messages('expense-parent-report.key114')/*员工*/}</Option>
              </Select>
            )}
          </FormItem>
          <FormItem label={messages('expense-parent-report.key115')/*收款方*/} {...formItemLayout}>
            {getFieldDecorator('accountId', {
              initialValue: payInfo.payeeCode ? (
                Number(getFieldValue('payeeType')) === 1001 ?
                  [{venderCode: payInfo.payeeCode, venNickname: payInfo.payeeName}] :
                  [{employeeID: payInfo.payeeCode, fullName: payInfo.payeeName}]
              ) : undefined,
              rules: [{
                required: true,
                message: messages('common.please.select'),
              }]
            })(
              this.renderPayeeId()
            )}
          </FormItem>
          <FormItem label={messages('expense-parent-report.key116')/*收款方银行账号*/} {...formItemLayout}>
            {getFieldDecorator('accountNumber', {
              initialValue: payInfo.accountNumber,
              rules: [{
                required: profile['report.property.card.required'],
                message: messages('common.please.select'),
              }]
            })(
              <Select notFoundContent={loading ? <Spin size="small"/> : messages('common.unmatched')/*无匹配结果*/}
                      getPopupContainer={triggerNode => triggerNode.parentNode}
                      onChange={this.changeBankAccount}
                      placeholder={messages('common.please.select')}>
                {bankListOption.map(item => {
                  return <Option key={item.accountNumber}>{item.originalBankAccountNo || item.accountNumber} {item.bankAccountTypeName} {item.branchName}</Option>
                })}
              </Select>
            )}
          </FormItem>
          <FormItem label={messages('expense-parent-report.key117')/*收款方户名*/} {...formItemLayout}>
            {getFieldDecorator('accountName', {
              initialValue: payInfo.accountName,
              rules: [{
                required: profile['report.property.card.required'],
                message: messages('common.please.input'),
              }]
            })(
              <Input disabled={true} placeholder={messages('common.please.input')}/>
            )}
          </FormItem>

          <FormItem label={messages('expense-parent-report.key196')/*付款方式类型*/} {...formItemLayout}>
            {getFieldDecorator('paymentPurposeId', {
              initialValue: paymentPurposeId.messageKey,
              rules: [{
                required: true,
                message: messages('common.please.select'),
              }]
            })(
              <Input disabled={true} placeholder={messages('common.please.input')}/>
            )}
          </FormItem>

          <FormItem label={messages('expense-parent-report.key197')/*付款用途*/} {...formItemLayout}>
            {getFieldDecorator('paymentMethod', {
              initialValue: payInfo.paymentMethod,
              rules: [{
                required: true,
                message: messages('common.please.select'),
              }]
            })(
              <Select notFoundContent={paymentMethodLoading ? <Spin size="small"/> : messages('common.unmatched')/*无匹配结果*/}
                      loading={paymentMethodLoading}
                      getPopupContainer={triggerNode => triggerNode.parentNode}
                      onFocus={this.handleGetPaymentMethod}
                      placeholder={messages('common.please.select')}>
                {paymentMethodList.map(item => {
                  return <Option key={item.id}>{item.description}</Option>
                })}
              </Select>
            )}
          </FormItem>

          <FormItem label={messages('expense-parent-report.key199')/*计划付款日期*/} {...formItemLayout}>
            {getFieldDecorator('schedulePaymentDate', {
              initialValue: payInfo.schedulePaymentDate ? payInfo.schedulePaymentDate : schedulePaymentDate,
              rules: [{
                required: expenseInfo && !!expenseInfo.contractHeaderId,
                message: messages('common.please.select'),
              }]
            })(
              <DatePicker
                style={{ width: '100%' }}
                format="YYYY-MM-DD"
                placeholder={messages('common.please.select')/* 请选择 */}/>
            )}
          </FormItem>

          <FormItem label={messages('common.remark')/*备注*/} {...formItemLayout}>
            {getFieldDecorator('remark', {
              initialValue: payInfo.remark || remarkInitialValue,
              rules: [{
                max: 500,
                message: messages('common.max.characters.length', {max: 500})
              }]
            })(
              <TextArea rows={3} placeholder={messages('common.please.input')/*请输入*/}/>
            )}
          </FormItem>
        </Form>
        <div><input ref="chooserBlur" style={{opacity: 0, position: 'fixed', width: 0, height: 0, zIndex: -1}}/></div>
        <div className="footer-operate">
          <Button style={{marginLeft: 20}} onClick={this.handleSave} loading={loading}
                  type="primary">{messages('common.save')/*保存*/}</Button>
          <Button style={{marginLeft: 20}} onClick={this.props.onClose}>{messages('common.cancel')/*取消*/}</Button>
        </div>
        {/* 新增供应商弹窗*/}
        <Modal visible={newVendorVisible}
               wrapClassName="new-vendor-modal"
               title={chooseInfo.id ? `${messages('request.key248'/*新增银行账号*/)}` : `${messages('request.key246'/*新增供应商*/)}`}
               cancelText={messages('common.back')/*返回*/}
               width={700}
               onCancel={this.handleCancelNewVendor}
               footer={null}>
          <NewVendorForm visible={newVendorVisible}
                         payeeInfo={chooseInfo}
                         userOid={(userOid || {}).userOid}
                         companyOid={companyOID}
                         onCancel={this.handleCancelNewVendor}
                         onOk={this.handleNewVendorOk}/>
        </Modal>

        {/* 新增银行卡*/}
        <Modal visible={accountModalVisible}
               wrapClassName="new-ven-master"
               className="payment-account-modal"
               title={`${messages('request.key257'/*供应商详情*/)}`}
               width={800}
               onCancel={this.handleModalCancel}
               footer={accountFooter}>
          <div className="account-name">
            {messages('request.key253'/*供应商开户名称*/)}：
            <h3>{chooseInfo.venNickname || payeeInfo.venNickname}</h3>
          </div>
          <div className="account-list">
            <Table rowKey="id"
                   columns={accountColumns}
                   dataSource={accountData}
                   loading={loadingBankList}
                   pagination={false}
                   rowClassName={record => {
                     return record.venType === 1002 ? 'row-warning' : 'row-expand-display-none'
                   }}
                   expandedRowRender={this.renderAllExpandedRow}
                   bordered
                   size="middle"/>
          </div>
        </Modal>
      </div>
    )
  }
}

EditPayInfo.propsType = {
  payInfo: React.PropTypes.object,//付款行对象信息
  onClose: React.PropTypes.func, //关闭弹框函数
  companyOID: React.PropTypes.string, //关闭弹框函数
  hasSupplierAdd: React.PropTypes.bool, //是否拥有供应商添加权限
  userOid:React.PropTypes.string,//
};

EditPayInfo.defaultProps = {
  payInfo: {}
};

EditPayInfo.contextTypes = {
  router: React.PropTypes.object
};


function mapStateToProps(state) {
  return {
    profile: state.login.profile,
    company: state.login.company
  }
}

const WrappedEditPayInfo = Form.create()(EditPayInfo);

export default connect(mapStateToProps)(WrappedEditPayInfo)
